<template>
    <div class="play">

        <audio :src="songURL" id="myaudio" v-on:loadedmetadata="isDownLoad" ref="myaudio"></audio>
        <div class="playMini" v-on:click="isShow=!isShow">
            <div class="discMini">
                <img v-lazy="songPicURL+'?param=400y400'"/>
            </div>
            <div class="lyric">
              {{lyricData}}
            </div>
            <div class="playBtn stopBtn" ref="playBtn" v-on:click.stop="isPlay"></div>
        </div>
        <transition name="van-slide-up">
        <div v-show="isShow" class="playContainer">
            <div class="backBtn" v-on:click="isShow=!isShow"></div>     
            <div class="needle">
            </div>
            <div class="disc roll" v-on:click="isPlay" ref="disc">
            <img v-lazy="songPicURL+'?param=400y400'"/>
            </div>
            <div class="playContent">
           <div class="name">{{songName}}</div>
            <div class="singer">{{singerName | listArr}}</div>
            <div class="lyricTxt">{{lyricData}}</div>
            <div class="range">
            <input class="custom-range" type="range" v-on:input="setProgress" v-model="rangValue" ref="myrang">
            </div>
            </div>
            <div class="playbg">
                <img v-lazy="songPicURL+'?param=400y400'"/>
            </div>
        </div>
        </transition>
    </div>
</template>

<script>
import { mapState,mapMutations} from 'vuex'
import Lyric from 'wu-lyric-parser'
export default {
   data(){
       return {
           isShow:false,
           songURL:"",
           lyricData:"欢迎使用微音乐.....",
           singerName:[],
           songName:"",
           songPicURL:"",
           rangValue:0,
           hasDownLoad:false
       }
   },
   methods:{
       
       isDownLoad(){
          this.hasDownLoad= true
       },

       setProgress(){
         if(this.hasDownLoad)
         {
             this.$refs.myaudio.currentTime = this.rangValue * this.$refs.myaudio.duration / 100
             this.lyric.seek(  this.$refs.myaudio.currentTime * 1000 )
         }
       },

       musicGo(){
         this.$refs.myaudio.ontimeupdate = () =>{
             this.rangValue=100 * this.$refs.myaudio.currentTime / this.$refs.myaudio.duration
         }
       },
       lyricparser(obj){
         this.lyricData=obj.txt
       },
       isPlay(){
           if(  this.songName=="")return
          if(this.$refs.myaudio.paused){
              this.$refs.myaudio.play()
              this.$refs.playBtn.classList.remove('stopBtn')
              this.$refs.disc.classList.add('playDisc')
              this.lyric.togglePlay()
              this.musicGo()
          }
          else{
              this.$refs.myaudio.pause()
              this.$refs.playBtn.classList.add('stopBtn')
              this.$refs.disc.classList.remove('playDisc')
              this.lyric.togglePlay()
          }
       },

       getSong(newID) {
            return this.axios(`http://localhost:3000/song/url?id=${newID}`)
        },
        getLyric(newID) {
            return this.axios(`http://localhost:3000/lyric?id=${newID}`)
        },
        getSongInfo(newID) {
            return this.axios(`http://localhost:3000/song/detail?ids=${newID}`)
        },
       ...mapMutations(['SAVEID'])
   },
   computed:{
       ...mapState(['SONG_ID'])
   },
   watch:{
       SONG_ID(newVal){
           if(newVal!=""){
     this.axios.all([this.getSong(newVal), this.getLyric(newVal), this.getSongInfo(newVal)  ])
        .then( this.axios.spread( (songURL,lyricData,songInfo) =>{
            console.log(songURL,lyricData,songInfo)
            this.songURL=songURL.data.data[0].url
            // this.lyricData=lyricData.data.lrc.lyric
            this.songName=songInfo.data.songs[0].name
            this.singerName=songInfo.data.songs[0].ar
            this.songPicURL=songInfo.data.songs[0].al.picUrl
            this.lyric= new Lyric( lyricData.data.lrc.lyric,this.lyricparser)
            this.$nextTick( ()=>{
               this.isPlay()
            })
            
        } ) )
           }  
       }
   }
}
</script>

<style scoped>
    .play{
        width: 100%;
        position: fixed;
        bottom: 50px;
        left: 0;
        z-index:9999 ;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .playMini{
        width: 100%;
        background: rgb(98, 81, 65,0.95);
        height: 36px;
        border-radius: 36px;
        position: relative;
        padding: 0 55px 0 50px;
        box-sizing: border-box;
    }
    .discMini{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: url(../../assets/disc.png);
        position: absolute;
        left: 0;
        top: -4px;
        background-size: cover;
        overflow: hidden;
    }
    .discMini>img{
        width: 100%;
    }
     .playBtn{
          width: 22px;
        height: 22px;
        background:url(../../assets/stop.png);
        background-size: cover;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    .stopBtn{
       
        background:url(../../assets/playbtn.png);
        background-size: cover;
        
    }
   
    .lyric{
        font-size: 12px;
        text-align: left;
        color: white;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 36px;
    }
    .playContainer{
        width: 100%;
        height: 100%;
        background: black;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10000;
        overflow: hidden;
       
    }
    .playbg{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
    }
    .playbg>img{
        height: 120%;
        filter: blur(40px) brightness(0.4);
    }
    .disc{
        width: 250px;
        height: 250px;
        background: url(../../assets/disc.png);
        background-size: cover;
        position: absolute;
        z-index: 999;
        left: 10%;
        top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        }
        .disc>img{
            width: 65%;
            border-radius: 50%;
        }
        .needle{
            position: fixed;
            top: 0;
            left: 50%;
            background: url(../../assets/needle.png);
            background-size: cover;
            width: 66px;
            height: 90px;
            z-index: 1001;
        }
        .playContent{
            color: white;
            position: absolute;
            z-index: 1002;
            bottom: 130px;
            text-align: center;
            padding: 25px;
            box-sizing: border-box;
            width: 100%;
            margin: auto;
        }
        .name{
            font-size: 16px;
        }
        .singer{
            font-size: 14px;
            padding: 15px 0;
        }
        .lyricTxt{
            font-size: 12px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 20px;
            line-height: 1.8;
        }
        .backBtn{
            width: 22px;
            height: 22px;
            background:url(../../assets/back.png);
            background-size: cover;
            position: absolute;
            z-index: 1005;
            left: 10px;
            top: 10px;
        }
        @keyframes palyAnimation{
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
        .roll{
            animation:palyAnimation 25s linear infinite;
            animation-play-state: paused;
            }
             .playDisc{
            animation-play-state: running;
        }
        .ranger{
    position: fixed;
    bottom: 80px;
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
}
  .custom-range{
    width: 100%;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.custom-range:focus{
    outline: none;
}
.custom-range::-webkit-slider-thumb{
    width: 0.6rem;
    height: 1rem;
    margin-top:-0.4rem;
    background: rgba(255, 255, 255, 1);
    border: 0;
    border-radius: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
}
.custom-range::-webkit-slider-runnable-track{
    width: 100%;
    height: 0.2rem;
    color: transparent;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    border-color: transparent;
    border-radius: 1rem;
}    

        
</style>